<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width:100%;
            border:1px solid #ccc;
            border-collapse:collapse;
            border-spacing:0px;
        }
        table td{
            border:1px solid red;
            height:30px;
        }
        /* input{
            width:80px;
            height:45px;
            background:gray;
        } */
    </style>
</head>
<body>
    <div class="box">
        <h1>利用dom节点生成动态表格</h1>
        <label for="">行：</label>
        <input type="text" id="row">
        <label for="">列：</label>
        <input type="text" id="col">
        <input type="button" id="btn" value="生成">
        <div id="output">
            <!-- <table>
                <tbody>
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" value="删除">
                            <input type="button" value="复制">
                        </td>
                        
                    </tr>
                </tbody>
            </table> -->
        </div>
    </div>
    <script>
        // 获取已知的元素
        var box=document.querySelector('.box');
        var row=document.querySelector('#row');
        var col=document.querySelector('#col');
        var btn=document.querySelector('#btn');
        var output=document.querySelector('#output');
        // 给按钮绑定点击事件
        btn.onclick=function(){
            // console.log(1)点击按钮时生成对应的行和列
            // 获取行数和列数
            var _row=row.value
            var _col=col.value
           
            console.log(_row,_col);
            // 创建元素
            var table=document.createElement('table');
            var tbody=document.createElement('tbody');
            // 将tbody放入table中
            table.appendChild(tbody);
            // 根据行和列生成表格，利用循环
            for(var i=0;i<_row;i++){
                // 每循环一次外层，生成一个tr
                // 判断行是偶数还是奇数，偶数行背景改为灰色
                if(i%2!==0){
                    tr.style.background='#ccc'
                }
                var tr=document.createElement('tr');
                for(var j=0;j<_col;j++){
                // 每循环一次内层，生成一个td
                var td=document.createElement('td');
                // 将td放入tr中
                td.innerHTML='单元格'+i+j
                tr.appendChild(td);
                }
                
                // 创建一个列，复制和删除功能
                 var td=document.createElement('td')
                tr.appendChild(td)
                var del=document.createElement('input')
                td.appendChild(del)
                del.setAttribute('value','删除')
                del.setAttribute('type','button')
                var copy=document.createElement('input')
                td.appendChild(copy)
                copy.setAttribute('value','复制')
                copy.setAttribute('type','button')
                // 给按钮添加点击事件
                del.onclick=function(){
                    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
                }
                // 克隆元素
                copy.onclick=function(){
                   var res=this.parentNode.parentNode.cloneNode(true)
                   tbody.appendChild(res)
                }
                
                // 将tr放入tbody里面
                tbody.appendChild(tr)

            }
            // 将table放入output中
            output.appendChild(table)
        }
    </script>
</body>
</html>